import Header from "./header";
import Property from "./property/property";
import GraphView from "./graphview";
import "@/style/index.scss";
import { DrawTypeEnum } from "./enum";
import GraphBase from "./shape/graphBase";
export default class EditorCanvas {
  header!: Header;
  property!: Property;
  graphview!: GraphView;
  container: HTMLElement;
  constructor(container: HTMLElement) {
    this.container = container;
    this.init();
  }
  init() {
    this.initHeader();
    this.initProperty();
    this.initGraphView();
  }
  initHeader() {
    this.header = new Header();
    this.container.appendChild(this.header.dom);
    this.header.on("draw", (command: DrawTypeEnum) => {
      this.graphview.setDrawInteractor(command);
    });
  }
  initGraphView() {
    // 计算绘图区宽高
    const containerWidth = this.container.clientWidth;
    const containerHeight = this.container.clientHeight;
    const propertyWidth = this.property.dom.clientWidth;
    const headerHeight = this.header.dom.clientHeight;
    this.graphview = new GraphView(
      containerWidth - propertyWidth,
      containerHeight - headerHeight
    );
    this.container.appendChild(this.graphview.dom);
    this.onSelectedChange = this.onSelectedChange.bind(this);
    this.onPropertyChange = this.onPropertyChange.bind(this);
    this.onDrawEnd = this.onDrawEnd.bind(this);
    this.graphview.on("selectedChange", this.onSelectedChange);
    this.graphview.on("propertyChange", this.onPropertyChange);
    this.graphview.on("drawEnd", this.onDrawEnd);
  }
  initProperty() {
    this.property = new Property();
    this.container.appendChild(this.property.dom);
    this.onChangeProperty = this.onChangeProperty.bind(this);
    this.property.on("propertyChange", this.onChangeProperty);
  }
  onSelectedChange(selectedObj: GraphBase) {
    this.property.changeSelected(selectedObj);
  }
  // 响应绘图区改变属性的回调
  onPropertyChange(
    propertyChangeObj:
      | {
          propertyName: string;
          oldValue: any;
          newValue: any;
        }
      | undefined
  ) {
    this.property.changeProperty();
  }
  // 响应属性面板属性改变的回调
  onChangeProperty(changeObj: { propertyName: string; propertyValue: any }) {
    this.graphview.changeProperty(changeObj);
  }
  // 响应绘图区绘制结束
  onDrawEnd() {
    this.header.changeDrawCommand(DrawTypeEnum.NO_DRAW);
  }
}
